<template>
  <div id="app">
    <h1>这里是根组件</h1>
    <h2>声明式导航</h2>
    <router-link to="/home" tag="div" active-class="hehe">首页</router-link>
    <router-link to="/my" tag="li" active-class="hehe">我的</router-link>
    <hr />
    <h2>编程式导航</h2>
    <ul>
      <li @click="jump('/home')">编程 - 首页</li>
      <li @click="jump('/my')">编程 - 我的</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    jump(path) {
      // console.log(this);
      // console.log(this.$router, path);
      // this.$router.history.push(path);
      this.$router.push(path);
    },
  },
  mounted() {
    console.log(this);
    console.log(this.$router);
    console.log(this.$route);
  },
};
</script>

<style>
.hehe {
  background: blue;
}
.router-link-active {
  background: red;
}
</style>
